<template>
	<view v-if="type" class="content">
		<view class="topControl">
			<view style="width: 80%">
				<image @tap="goBack()" style="height: 40rpx;width: 40rpx;"
					src="../../static/tu/StoreDetails_return.png"></image>
			</view>
			<image style="margin-left: 3%;height: 30rpx;width: 30rpx;" src="../../static/tu/StoreDetails_share.png">
			</image>
			<image style="margin-left: 3%;height: 30rpx;width: 30rpx;" src="../../static/tu/StoreDetails_ring.png">
			</image>
		</view>
		<view style="height: 40%;"></view>
		<view class="topMsg">
			<u-row style="padding: 4%;padding-bottom: 0%;">
				<p style="width: 75%;font-size: 18px;">深圳大厦4S店</p>
				<image style="width: 20rpx;height: 26rpx;" src="../../static/tu/StoreDetails_location.png"></image>
				<p style="font-size: 15px">3.2公里</p>
			</u-row>
			<u-row style="padding:4% 4% 0 4%;">
				<p style="font-size: 12px;width: 90%;">深圳市宝安区黄务街道千库大厦23号</p>
				<u-button style="width: 70rpx;height: 50rpx;" shape="circle" size="small" text="+ 关注"
					color="linear-gradient(to top,rgb(66, 130, 235),rgb(5, 189, 253) )"></u-button>
			</u-row>
		</view>
		<u-row style="margin:5% 4% 5% 4%;">
			<u-col span="7" style="flex-direction: row;">
				<p>视频看车</p>
				<p style="font-size: 6px;color: red;background-color:#fde0ce;padding:1% ;border-radius: 24rpx;margin-left: 2%;text-align: center;">
					看视频答题领优惠</p>
			</u-col>
			<u-col span="4"></u-col>
			<u-col span="1">
				<u-icon name="arrow-right" color="#a8a8a8" size="15"></u-icon>
			</u-col>
		</u-row>
		<u-scroll-list :indicator="false" style="margin-left: 4%;margin-right: 4%;" >
			<view v-for="(item, index) in list" :key="index" style="margin-right: 4%;" @click="showVideo(index)">
				<image style="border-radius: 20rpx;height: 150rpx;width: 250rpx;" :src="item.url"></image>
				<image style="width: 50rpx;height: 50rpx;position: absolute;top: 20%;"
					:style="{left: leftValue+(index*250) + 'rpx'}" src="../../static/tu/StoreDetails_broadcast.png">
				</image>
				<p>{{item.title}}</p>
				<p style="font-size: 15rpx;">{{item.msg}}</p>
			</view>
		</u-scroll-list>
		<p style="margin:3% 4% 3% 4%;">热销车型</p>
		<view style="margin:0 4% 2% 4%;" v-for="(item, index) in hotCarList" :key="index">
			<u-row>
				<image style="border-radius: 20rpx;height: 160rpx;width: 240rpx;" :src="item.url"></image>
				<view style="margin-left:3% ;">
					<p>{{item.title}}</p>
					<p style="font-size: 28rpx;">{{item.more}}</p>
					<p style="font-size: 15rpx;">{{item.msg}}</p>
					<p style="color: red;">{{item.money}}</p>
				</view>
			</u-row>
			<u-line length="100%" style="margin-top:25rpx;"></u-line>

		</view>
		<u-button style="width: 220rpx;height: 70rpx;border-radius: 15rpx;position: fixed;bottom: 2%;right: 5%;"
			text="联系店家" color="linear-gradient(to top,rgb(66, 130, 235),rgb(5, 189, 253) )"></u-button>
		
	</view>
	<view v-else style="width: 100%;height: 100%;position: absolute;left: 0;top: 0;background-color: black;" :style="{display:videoShow}">
		<video id="myVideo" 
			   style="width: 100%;height: 100%;"
			   :src="videoUrl"
			   @ended="videoEnded" controls></video>
		<u-icon name="close-circle" color="#fff" size="24" style="position: fixed;top: 2%;right: 5%;" @click="closeVideo"></u-icon>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				leftValue: 125,
				list: [{
						mp4:"https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4",
						url: "../../static/tu/StoreDetails_car1.png",
						title: "588ku T800",
						msg: "2019款 2.0T自动"
					},
					{
						mp4:"https://cdn.uviewui.com/uview/resources/video.mp4",
						url: "../../static/tu/StoreDetails_car2.png",
						title: "588ku T800",
						msg: "2019款 2.0T自动"
					},
					{
						mp4:"https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4",
						url: "../../static/tu/StoreDetails_car3.png",
						title: "588ku T800",
						msg: "2019款 2.0T自动"
					}
				],
				hotCarList: [{
						url: "../../static/tu/StoreDetails_car4.png",
						title: "588ku T800 2019款自动",
						more: "带天窗",
						msg: "2019款 2.0T 自动",
						money: "￥12.36万"
					},
					{
						url: "../../static/tu/StoreDetails_car6.png",
						title: "588ku T800 2019款自动",
						more: "带天窗",
						msg: "2019款 2.0T 自动",
						money: "￥12.36万"
					},
					{
						url: "../../static/tu/StoreDetails_car3.png",
						title: "588ku T800 2019款自动",
						more: "带天窗",
						msg: "2019款 2.0T 自动",
						money: "￥12.36万"
					}
				],
				type:true,
				video:null,
				videoUrl:"",
				videoShow:"none",
			}
		},
		mounted () {
			// 创建视频对象
			this.video = uni.createVideoContext('myVideo', this);
		},
		methods: {
			goBack() {

				//多层级下用这个
				// uni.navigateBack({
				// 	//关闭当前页面，返回上一页面或多级页面。
				// 	delta: 1
				// });

				//保证刷新要跳到上一级页面
				uni.switchTab({
					url: '/pages/maiche/maiche',
				})
			},
			showVideo(index){
				if(index==0){
					this.videoUrl=this.list[0].mp4;
				}else if(index==1){
					this.videoUrl=this.list[1].mp4;
				}else if(index==2){
					this.videoUrl=this.list[2].mp4;
				}
				this.type=false;
				this.video.play(); //播放视频
				this.videoShow="";
			},
			videoEnded(e){
				this.type=true;
				this.video.pause(); // 暂停视频
				this.videoShow="none";
			},
			closeVideo(){
				this.type=true;
				this.video.pause(); // 暂停视频
				this.videoShow="none";
			}
		}
	}
</script>

<style>
	.content {
		background-image: url("../../static/tu/StoreDetails_car5.png");
		width: 100%;
		height: 460rpx;
	}

	.topControl {
		height: 200rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: row;
	}

	.topMsg {
		width: 90%;
		height: 200rpx;
		background-color: #fefefe;
		border-radius: 24upx;
		box-shadow: 0 0 20upx rgba(0, 0, 0, 0.15);
		margin: 0 4% 0 4%;
	}
</style>